<template>
  <div>
    <el-button v-auth="{v: pms, bool: isOperation}" class="border-btn" size="small" style="margin-bottom: 20px;"
      @click="handlAdd">新增地址</el-button>
    <table-view :data="tableData" header-cell-class-name="table-header" border size="medium">
      <el-table-column type="index" label="序号" align="center" width="50" :show-overflow-tooltip="true" />
      <el-table-column label="地址类型" align="center" :show-overflow-tooltip="true">
        <template #default="{row}">
          {{ getLabel('address_type', row.addressType) }}
        </template>
      </el-table-column>
      <el-table-column label="所在地区" align="center" header-align="center" :show-overflow-tooltip="true">
        <template #default="{row}">
          {{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}
        </template>
      </el-table-column>
      <el-table-column prop="addressDetail" label="详细位置" header-align="center"
        :show-overflow-tooltip="true" />
      <el-table-column prop="ifDefault" label="是否为默认地址" align="center" :show-overflow-tooltip="true">
        <template #default="{row}">
          <span v-if="row.ifDefault!==2">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间" header-align="center"  :show-overflow-tooltip="true">
        <template #default="{row}">
          {{ dateFormat("yyyy-mm-dd HH:MM:SS",row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column v-if="isOperation" label="操作" align="center" >
        <template #default="{row}">
          <el-button v-auth="{v: pms, bool: row.ifDefault===1}" type="text" @click="handlSet(row.id)">设为默认地址</el-button>
          <el-button v-auth="{v: pms}" type="text" @click="handlEdit(row)">编辑</el-button>
          <el-button v-auth="{v: pms}" type="text" @click="handlDele(row.id)">删除</el-button>
        </template>

      </el-table-column>
    </table-view>
    <Pagination v-model:page="queryParams.page" v-model:limit="queryParams.pageSize"
      style="display: flex; justify-content: flex-end" :total="total" @pagination="handlList" />
    <address-list ref="addressDialog" :title="title" @succsess="succsess" />
  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute } from "vue-router";

export default {
  name: "Customer",
  components: {
    addressList: defineAsyncComponent(() => import("./addAddress.vue")),
  },
  props: {
    typeData: {
      type: String,
      default() {
        return "";
      },
    },
    isOperation: {
      type: Boolean,
      default: true,
    },
    // 操作权限
    pms: {
      type: Array,
      default: () => {},
    },
  },
  setup(props, context) {
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const api = inject("api");
    var data = reactive({
      tableData: [],
      addressDialog: null,
      queryParams: {
        relationId: Number(route.query.id),
        modelType: props.typeData,
        pageSize: 20,
        page: 1,
      },
      total: 0,
      title: "",
    });
    const handlAdd = () => {
      data.title = "新建地址";
      data.addressDialog.open(null, props.typeData);
    };

    // 获取列表
    const handlList = () => {
      api.terminal.CUSTOMER_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
      });
    };

    // 编辑
    const handlEdit = (row) => {
      data.title = "编辑地址";
      data.addressDialog.open(row, props.typeData);
    };

    const handlSet = (id) => {
      currentInstance.proxy
        .alertBox({
          message: "是否设为默认地址",
          title: "设置默认地址",
        })
        .then(() => {
          api.terminal.CUSTOMER_DEFAULT(id).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            } else {
              handlList();
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    // 删除
    const handlDele = (id) => {
      currentInstance.proxy
        .alertBox({
          message: "删除数据后不可恢复,确定删除？",
        })
        .then(() => {
          api.terminal.CUSTOMER_DELETE(id).then((res) => {
            if (res.code) {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            } else {
              handlList();
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    // 刷新列表
    const succsess = () => {
      handlList();
    };

    onMounted(() => {
      handlList();
    });

    return {
      ...toRefs(data),
      handlAdd,
      handlList,
      handlEdit,
      handlDele,
      succsess,
      handlSet,
    };
  },
};
</script>

<style scoped>
:deep(.el-button--text) {
  padding: 0;
  border: 0;
}
</style>
